<template>
	<view class="risk">
		<u-tabs :list="list1" @click='clickTabs'></u-tabs>
		<view class="" v-if="tabs_id == 0">
			<image :src="tlx_report" mode="widthFix" v-if="tlx_report !== ''" style="width: 100%;"
				@click="lookImage(tlx_report)" />
		</view>
		<view class="" v-if="tabs_id == 1">
			<web-view :src="zuxz_report.url"></web-view>
		</view>
		<view class="" v-if="tabs_id == 2">
			<view v-if="report_url == ''">
				<u-no-network></u-no-network>
				<view class="u-content">
					<view class="u-content__circle">
						<u-icon name="checkbox-mark" color="#fff" size="30"></u-icon>
					</view>
					<text class="u-content__normal">用户未上传流水报告</text>
					<text class="u-content__normal">请联系用户上传！</text>
				</view>
			</view>
			<web-view :src="report_url" v-else></web-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: "",
				report_url: "",
				tlx_report: "",
				zuxz_report: null,
				list1: [{
					name: '天狼星报告',
					id: 0
				}, {
					name: '租先知',
					id: 1
				}, {
					name: '流水报告',
					id: 2
				}],
				tabs_id: 0
			}
		},
		onLoad(e) {
			this.order_id = e.order_id;
			this.init();
		},
		methods: {
			lookImage(e) {
				uni.previewImage({
					urls: [e]
				});
			},
			clickTabs(item) {
				console.log('item', item);
				this.tabs_id = item.id
				switch (this.tabs_id) {
					case 0:
						this.tlxClick()
						break;
					case 1:
						this.zuxzClick()
						break;
				}
			},
			tlxClick() {
				let self = this;
				if (self.tlx_report == '') {
					self.loading = true;
					self._post(
						'yunxin.query/siriusReport', {
							order_id: self.order_id,
						},
						function(res) {
							self.loading = false;
							console.log(res, 'res---')
							self.tlx_report = res.data.tlx_report
						}
					);
				}
			},
			zuxzClick() {
				let self = this;
				if (self.zuxz_report == null) {
					self.loading = true;
					self._post(
						'zuxianzhi.zuxz/zuxz', {
							order_id: self.order_id,
							source_type: 2
						},
						function(res) {
							self.loading = false;
							console.log(res, 'res---')
							// self.zuxz_report = res.data.zuxz_report
						}
					);
				}
			},
			init() {
				let self = this;
				self.loading = true;
				self._post(
					'supplier.order/riskDetail', {
						order_id: self.order_id,
					},
					function(res) {
						self.loading = false;
						self.report_url = res.data.report_url
						self.tlx_report = res.data.tlx_report
						self.zuxz_report = res.data.zuxz_report
						self.tlxClick()
					}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-content {
		padding: 150px 60px 0;
		@include flex(column);
		align-items: center;
		justify-content: center;

		&__circle {
			background-color: $u-success;
			@include flex;
			border-radius: 100px;
			width: 60px;
			height: 60px;
			align-items: center;
			justify-content: center;
		}

		&__normal {
			font-size: 15px;
			color: $u-success;
			margin-top: 15px;
		}
	}
</style>